<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">

            <!-- 筛选 -->
            <table class="commonTable" cellspacing="0">
                <tr>
                    <td colspan="1">晒单类型</td>
                    <td colspan="1">
                        <el-select v-model="showType" placeholder="请选择">
                            <el-option
                                v-for="item in showTypeOptions"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                    <td colspan="1">产品品目</td>
                    <td colspan="1">
                        <el-select v-model="productType" placeholder="请选择">
                            <el-option
                                v-for="item in productTypeOptions"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td colspan="1">晒单提交时间</td>
                    <td colspan="1">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </td>
                    <td colspan="1">审批状态</td>
                    <td colspan="1">
                        <el-select v-model="state" placeholder="请选择">
                            <el-option
                                v-for="item in stateOptions"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </table>

            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    label="序号"
                    prop="name">
                </el-table-column>
                <el-table-column
                    label="用户名称"
                    prop="address">
                </el-table-column>
                <el-table-column
                    label="产品品目"
                    prop="description">
                </el-table-column>
                <el-table-column
                    label="晒单类型"
                    prop="description">
                </el-table-column>
                <el-table-column
                    label="晒单提交时间"
                    prop="description">
                </el-table-column>
                <el-table-column
                    label="审批状态"
                    prop="description">
                </el-table-column>
                <el-table-column label="晒单审批" width="200">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">详情查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页 -->
            <div class="Pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>

            <!-- 查看详情模态框 -->
            <el-dialog title="晒单详情" v-model="dialogFormVisible">

                <table class="commonTable" cellspacing="0">
                    <tr>
                        <td colspan="1">用户名称</td> <td colspan="1">aaa</td>
                    </tr>
                    <tr>
                        <td colspan="1">晒单提交时间</td> <td colspan="1">aaa</td>
                    </tr>
                    <tr>
                        <td colspan="1">晒单内容</td>
                        <td colspan="3">
                            <textarea disabled></textarea>
                        </td>
                    </tr>
                </table>

                <show-big-img></show-big-img>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary">通 过</el-button>
                    <el-button>不通过</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import singleDryingList from '../components/singleDryingList'
    import showBigImg from '../components/showBigImg.vue'
    import headTop from '../components/headTop'
    import {baseUrl, baseImgPath} from '@/config/env'
    import {cityGuess, getResturants, getResturantsCount} from '@/api/getData'
    export default {
        components: {
            headTop,
            showBigImg
        },
        data(){
            return {
                baseUrl,
                baseImgPath,
                offset: 0, // 获取数据 从第几条数据开始
                limit: 20, // 获取数据条数
                count: 0, // 总页数
                currentPage: 1, // 当前页号
                tableData: [], // 表格数据
                selectTable: {}, // 查看详情 选择的row
                dialogFormVisible: false, // 模态框 显示与否
                city: {},

                dateRange: '',
                showType: '',
                showTypeOptions: [
                    {value: '使用晒'}
                ],
                state: '',
                stateOptions: [
                    {value: '已审批'}
                ],
                productType: '',
                productTypeOptions: [
                    {value: '抽油烟机'}
                ]
            }
        },
        created(){
            // 下拉列表otions
            this.productTypeOptions = singleDryingList.productTypeOptions
            this.showTypeOptions = singleDryingList.showTypeOptions
            this.stateOptions = singleDryingList.stateOptions
            this.initData();
        },
        methods: {
            // 初始化，获取总页数，获取对应页号数据
            async initData(){
                try{
                    this.city = await cityGuess();
                    const countData = await getResturantsCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    }else{
                        throw new Error('获取数据失败');
                    }
                    this.getData();
                }catch(err){
                    console.log('获取数据失败', err);
                }
            },
            // 获取数据
            async getData(){
                const {latitude, longitude} = this.city;
                const restaurants = await getResturants({latitude, longitude, offset: this.offset, limit: this.limit});
                this.tableData = [];
                restaurants.forEach(item => {
                    const tableData = {};
                    tableData.name = item.name;
                    tableData.description = item.description;
                    tableData.id = item.id;
                    tableData.phone = item.phone;
                    tableData.rating = item.rating;
                    tableData.recent_order_num = item.recent_order_num;
                    tableData.category = item.category;
                    tableData.image_path = item.image_path;
                    this.tableData.push(tableData);
                })
            },
            // 查看详情
            handleEdit(index, row) {
                this.selectTable = row;
                this.dialogFormVisible = true;
            },

            // 分页组件
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.getData()
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';
    @import '../assets/style/common.less';
    .table_container{
        padding: 20px;
    }
    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }

    /* 重置样式 */
   .el-dialog {
       transform: none;
       width: 60%;
       left: 20%;
   }
</style>
